<!DOCTYPE html>

<html>

<head>
    <title>Example 01.05 - Control gui</title>
    <script src="./javascripts/three.js"></script>
    <script src="./javascripts/stats.js"></script>
    <script src="./javascripts/dat.gui.js"></script>
    <script src="./javascripts/jquery-1.9.0.js"></script>
    <style>
        body{
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    $(function () {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor('white', 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
        var planeMaterial =    new THREE.MeshLambertMaterial({color: 0xffffff});
        var plane = new THREE.Mesh(planeGeometry,planeMaterial);
        plane.receiveShadow  = true;

        // rotate and position the plane
        plane.rotation.x=-0.5*Math.PI;
        plane.position.x=15
        plane.position.y=0
        plane.position.z=0

        // add the plane to the scene
        scene.add(plane);

        // create a cube
        var cubeGeometry = new THREE.CubeGeometry(4,4,4);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.castShadow = true;

        // position the cube
        cube.position.x=-4;
        cube.position.y=3;
        cube.position.z=0;

        // add the cube to the scene
        scene.add(cube);

        var sphereGeometry = new THREE.SphereGeometry(4,20,20);
        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

        // position the sphere
        sphere.position.x=20;
        sphere.position.y=0;
        sphere.position.z=2;
        sphere.castShadow=true;

        // add the sphere to the scene
        scene.add(sphere);

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

        // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);

        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight( 0xffffff );
        spotLight.position.set( -40, 60, -10 );
        spotLight.castShadow = true;
        scene.add( spotLight );

        // add the output of the renderer to the html element
        $("#WebGL-output").append(renderer.domElement);

        // call the render function

        var controls = new function() {
            this.rotationSpeed = 0.02;
            this.bouncingSpeed = 0.03;
        }

        var gui = new dat.GUI();
        var speed1controller = gui.add(controls, 'rotationSpeed',-0.5,0.5);
        var speed2controller = gui.add(controls, 'bouncingSpeed',0,1);
///////////////////////////////////////////
        function a() {
            $.ajax({
                url: '/control/getV',
                dataType: 'json',
                success: function (s) {
                    speed= s.sp;
                    circ=s.cir;
                }
            });
            return 0;
        }
        var speed=0;
        var step=0;
        var circ=0;
        setInterval(a,100);
 //////////////////////////////////////
        renderScene();

        function renderScene() {
            stats.update();
            // rotate the cube around its axes
            cube.rotation.x += controls.rotationSpeed;
            cube.rotation.y += controls.rotationSpeed;
            cube.rotation.z += controls.rotationSpeed;

//            cube.rotation.x += (speed-0.5)/5;
//            cube.rotation.y += (speed-0.5)/5;
//            cube.rotation.z += (speed-0.5)/5;
//
            speed1controller.setValue(speed);
            speed2controller.setValue(circ);
            // bounce the sphere up and down
            step+=controls.bouncingSpeed/10;
            sphere.position.x = 20+( 10*(Math.cos(step)));
            sphere.position.y = 2 +( 10*Math.abs(Math.sin(step)));

            // render using requestAnimationFrame
            requestAnimationFrame(renderScene);
            renderer.render(scene, camera);

            /*
            $('input')[0].value=(speed-0.5)/5;
            $('input')[1].value=circ/40;
            $('.slider-fg')[0].style.width=speed*100+'%';
            $('.slider-fg')[1].style.width=circ*10+'%';
            */
        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            $("#Stats-output").append( stats.domElement );

            return stats;
        }
    });



</script>
</body>
</html>